<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerX="true"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style>
 .arrowUp{
    background: url(../../sample_html/report/arrow-up.png) no-repeat 100% 50%;
    padding:0 20px 0 0;
    width: 80px;
 } 
  .arrowDown{
    background: url(../../sample_html/report/arrow-down.png) no-repeat 100% 50%;
    padding:0 20px 0 0;
    width: 80px;
 } 
</style>
</head>
<body>
  <div class="page_content">
  <div class="groupTitle"><span>同比环比统计</span></div>
  <div id="maingrid"></div>
  </div>
<script type="text/javascript">
     var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
            {
                "col1":"2016",
                "id":125,
                "rows":[{
                    "col2": "1月份",
                    "col3": "2,362",
                    "col4": "--",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "2月份",
                    "col3": "2,362",
                    "col4": "170%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "3月份",
                    "col3": "2,362",
                    "col4": "68%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "4月份",
                    "col3": "2,362",
                    "col4": "37%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "5月份",
                    "col3": "2,362",
                    "col4": "713%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "6月份",
                    "col3": "2,362",
                    "col4": "36%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "7月份",
                    "col3": "2,362",
                    "col4": "376%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "8月份",
                    "col3": "2,362",
                    "col4": "250%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "9月份",
                    "col3": "2,362",
                    "col4": "110%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "10月份",
                    "col3": "2,362",
                    "col4": "142%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "11月份",
                    "col3": "2,362",
                    "col4": "122%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "12月份",
                    "col3": "2,362",
                    "col4": "99%",
                    "col5": "--",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    }]
            },
            {
                "col1":"2017",
                "id":125,
                "rows":[{
                    "col2": "1月份",
                    "col3": "2,362",
                    "col4": "--",
                    "col5": "2470%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "2月份",
                    "col3": "2,362",
                    "col4": "65%",
                    "col5": "947%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "3月份",
                    "col3": "2,362",
                    "col4": "100%",
                    "col5": "1399%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "4月份",
                    "col3": "2,362",
                    "col4": "136%",
                    "col5": "5180%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "5月份",
                    "col3": "2,362",
                    "col4": "72%",
                    "col5": "524%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "6月份",
                    "col3": "2,362",
                    "col4": "97%",
                    "col5": "1422%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "7月份",
                    "col3": "2,362",
                    "col4": "141%",
                    "col5": "533%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "8月份",
                    "col3": "2,362",
                    "col4": "86%",
                    "col5": "184%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "9月份",
                    "col3": "2,362",
                    "col4": "126%",
                    "col5": "211%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "10月份",
                    "col3": "2,362",
                    "col4": "116%",
                    "col5": "171%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "11月份",
                    "col3": "2,362",
                    "col4": "59%",
                    "col5": "84%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    },
                    {
                    "col2": "12月份",
                    "col3": "2,362",
                    "col4": "187%",
                    "col5": "158%",
                    "col6": "1%",
                    "col7": "11",
                    "col8": "23",
                    "col9": "2,362",
                    "col10": "2,362"
                    }]
            }
    ]}
       

       //数据表格
    var g;
        
  $(function(){
        g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '年份', name: 'col1',width: 100},
                  { display: '月份', name: 'col2',width: 100},
                  { display: '销售额', name: 'col3',width: 100},
                  { display: '月份环比', name: 'col4',width: 120,render:renderText},
                  { display: '年份同比', name: 'col5',width: 120,render:renderText},
                  { display: '占比', name: 'col6',width: 100},
                  { display: '年内排名', name: 'col7',width: 100},
                  { display: '总排名', name: 'col8',width: 100},
                  { display: '年内累计', name: 'col9',width: 100},
                  { display: '总累计', name: 'col10',width: 100}
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',rownumbers:false,checkbox:false,
                height: 'auto', width:1048,multihead:true,multiBody:true,usePager:false,hideScrollerX:true
            });
      })
    function pertonum(stringObj){
      var newstr=stringObj.replace(/%/, "");
      return Number(newstr);
    }    
     function renderText(rowdata, rowindex, value, column){
    var content;
    if(pertonum(value)>100||pertonum(value)==100){
      content="<div class='arrowUp'>" + value + "</span>"
    }
    else if(pertonum(value)<100){
      content="<div class='arrowDown'>" + value + "</span>"
    }
    else {
      content= value
    }
    return content;
  }
    </script>   
</body>
</html>